<template>
    <view class="container">
        <image src="/static/jian.png" class="btn decrease" :hidden="count < 1" @click="decrease"></image>
        <view :hidden="count < 1" class="count">{{ currentCount }}</view>
        <!-- <input type="number" disabled="true" :hidden="count<1" v-model="currentCount" class="count" /> -->
        <image src="/static/jia.png" class="btn increase" @click="increase"></image>
    </view>
</template>

<script>
import { addProduct } from '@/api/order.js';
export default {
    props: {
        count: {
            type: Number,
            value: 0
        },
        product: {
            type: Object,
            value: {}
        }
    },
    data() {
        return {};
    },
    computed: {
        currentCount: {
            get() {
                return this.count;
            },
            set(val) {
                this.$emit('update:count', val);
                this.$emit('onCountChanged', val);
            }
        }
    },
    onLoad() {},
    methods: {
        decrease() {
            if (this.currentCount <= 0) return;
            if (this.product.timer) clearTimeout(this.product.timer);
            this.product.timer = setTimeout(() => {
                const data = {
                    num: -1,
                    productId: this.product.productId || this.product.id
                };
                addProduct(data).then(respanse => {
                    this.currentCount--;
                });
            }, 300);
        },
        increase() {
            if (this.currentCount >= this.product.store) {
                uni.showToast({
                    title: '库存不足！',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }
			if(this.product.price==0 && this.currentCount>=this.product.maxNum){
				uni.showToast({
				 	title: '您已超出最大领取数量！',
				    icon: 'none',
				    duration: 2000
				});
				return;
			}
            if (this.product.timer) clearTimeout(this.product.timer);
            this.product.timer = setTimeout(() => {
                const data = {
                    num: 1,
                    productId: this.product.productId || this.product.id
                };
                addProduct(data).then(respanse => {
                    this.currentCount++;
                });
            }, 300);
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    .btn {
        padding: 10rpx;
        width: 36rpx;
        height: 36rpx;
        &.increase {
            padding-left: 0;
        }
        &.decrease {
            padding-right: 0;
        }
    }
    .count {
        width: 60rpx;
        height: 56rpx;
        font-size: 36rpx;
        text-align: center;
        color: #000000;
    }
}
</style>
